<template>
  <sar-space direction="vertical" size="large">
    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        icon-size="48rpx"
        shape="oval"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="oval"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="oval"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="oval"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        icon-size="48rpx"
        shape="circle"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="circle"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="circle"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="circle"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        icon-size="48rpx"
        shape="square"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="square"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="square"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="square"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        shape="triangle"
        icon-size="48rpx"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="triangle"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="triangle"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="triangle"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        icon-size="48rpx"
        shape="flower"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="flower"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="flower"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="flower"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>
  </sar-space>
</template>
